<template>
    <div class="sidebar">
        <el-scrollbar height="92vh">
            <el-menu
                active-text-color="#ffd04b"
                text-color="#fff"
                background-color="#545c64"
                @open="handleOpen"
                @close="handleClose"
            >
                <!-- 商品管理 -->
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><GoodsFilled /></el-icon>
                        <span>商品管理</span>
                    </template>
                    <el-menu-item @click="$router.push('/category')" index="1-1"
                        >一级分类</el-menu-item
                    >
                    <el-menu-item @click="$router.push('/sub')" index="1-2"
                        >二级分类</el-menu-item
                    >
                    <el-menu-item @click="$router.push('/goods')" index="1-3"
                        >全部商品</el-menu-item
                    >
                </el-sub-menu>
                <!-- 订单管理 -->
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Box /></el-icon>
                        <span>全部订单</span>
                    </template>
                    <el-menu-item @click="$router.push('/order')" index="2-1"
                        >订单</el-menu-item
                    >
                </el-sub-menu>
                <!-- 用户管理 -->
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon><Avatar /></el-icon>
                        <span>用户管理</span>
                    </template>
                    <el-menu-item @click="$router.push('/user')" index="3-1"
                        >普通用户</el-menu-item
                    ><el-menu-item
                        @click="$router.push('/business')"
                        index="3-2"
                        >商家</el-menu-item
                    >
                </el-sub-menu>
                <!-- 其他 -->
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon><Menu /></el-icon>
                        <span>其他</span>
                    </template>
                    <el-menu-item @click="$router.push('/rotation')" index="4-1"
                        >轮播图管理</el-menu-item
                    >
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </div>
</template>

<script setup>
import { GoodsFilled, Box, Avatar, Menu } from '@element-plus/icons-vue'

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
.sidebar {
    --el-color-primary: #da9233;
    background-color: rgb(84, 92, 100);
    height: 92vh;
    width: 150px;
}
</style>
